import React, { Component } from 'react';
import { Modal, Form, Input,Select} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
class PeopleActionModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = e => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };
  render() {
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { id, name, phone, email, lock,cancle, forbidden,status } = this.props.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <span>
        <span onClick={this.showModelHandler}>{children}</span>
        <Modal
          title="读者用户权限编辑"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
        >
          <Form layout="horizontal" onSubmit={this.okHandler}>
            <FormItem {...formItemLayout} label="id">
              {getFieldDecorator('id', {
                initialValue: id,
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="Name">
              {getFieldDecorator('name', {
                initialValue: name,    
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="Phone">
              {getFieldDecorator('phone', {
                initialValue: phone,    
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="Email">
              {getFieldDecorator('email', {
                initialValue: email,    
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="锁定">
              {getFieldDecorator('lock', {
                initialValue: lock,
              })(<Select placeholder="选择是否锁定">
                  <Option value="0">否</Option>
                  <Option value="1">是</Option>
                </Select>)}
            </FormItem>
            <FormItem {...formItemLayout} label="取消">
              {getFieldDecorator('cancle', {
                initialValue: cancle,
              })(<Select placeholder="选择是否取消">
                  <Option value="0">否</Option>
                  <Option value="1">是</Option>
                </Select>)}
            </FormItem>
            <FormItem {...formItemLayout} label="禁用">
              {getFieldDecorator('forbidden', {
                initialValue: forbidden,
              })(<Select placeholder="选择是否禁用">
                  <Option value="0">否</Option>
                  <Option value="1">是</Option>
                </Select>)}
            </FormItem>
            <FormItem {...formItemLayout} label="状态">
              {getFieldDecorator('status', {
                initialValue: status,
              })(<Select placeholder="选择读者状态">
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                  <Option value="2">已上线</Option>
                  <Option value="3">异常</Option>
                </Select>)}
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create()(PeopleActionModal);
